JavaScript Basics

 

JavaScript is one of the most popular programming languages in the world. It is used to create dynamic and interactive web applications. This article provides a comprehensive overview of JavaScript basics, covering essential concepts such as variables, data types, functions, loops, and more.

Introduction to JavaScript

JavaScript is a high-level, interpreted programming language that is widely used for web development. It enables developers to add interactive elements to web pages, making them more engaging for users.

Why Learn JavaScript?

• It is the backbone of web development.

• It is supported by all modern browsers.

• It is used alongside HTML and CSS to create full-fledged web applications.

• It has a vast ecosystem, including frameworks like React, Angular, and Vue.js.

Variables and Data Types

Variables in JavaScript are used to store data. JavaScript has three ways to declare variables:

• var (old way, function-scoped)

• let (block-scoped, introduced in ES6)

• const (constant, block-scoped, introduced in ES6)

Example:

var name = "John";
let age = 25;
const country = "USA";

Data Types

JavaScript has several data types:

1. Primitive Data Types

   • String: "Hello World"

   • Number: 42

   • Boolean: true or false

   • Null: null

   • Undefined: undefined

   • Symbol (introduced in ES6)

   • BigInt (for large numbers)

2. Non-Primitive (Reference) Data Types

   • Object: { key: value }

   • Array: [1, 2, 3]

   • Function: function() {}

Operators

JavaScript includes various operators:

• Arithmetic Operators (+, -, *, /, %, ++, --)

• Comparison Operators (==, ===, !=, !==, >, <, >=, <=)

• Logical Operators (&&, ||, !)

• Assignment Operators (=, +=, -=, *=, /=)

• Ternary Operator (condition ? trueValue : falseValue)

Functions

Functions allow code reusability and modularization.

Function Declaration:

function greet(name) {
  return "Hello, " + name;
}
console.log(greet("Alice"));

Function Expression:

const greet = function(name) {
  return "Hello, " + name;
};
console.log(greet("Bob"));

Arrow Functions (ES6):

const greet = (name) => `Hello, ${name}`;
console.log(greet("Charlie"));

Control Structures

Conditional Statements

let num = 10;
if (num > 0) {
  console.log("Positive number");
} else {
  console.log("Negative number");
}

Switch Statement

let day = "Monday";
switch (day) {
  case "Monday":
    console.log("Start of the week");
    break;
  case "Friday":
    console.log("Weekend is near");
    break;
  default:
    console.log("Regular day");
}

Loops

For Loop

for (let i = 0; i < 5; i++) {
  console.log("Iteration", i);
}

While Loop

let i = 0;
while (i < 5) {
  console.log("Iteration", i);
  i++;
}

Do-While Loop

let i = 0;
do {
  console.log("Iteration", i);
  i++;
} while (i < 5);

Arrays and Objects

Arrays

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]);

Objects

let person = {
  name: "John",
  age: 30,
  city: "New York"
};
console.log(person.name);

DOM Manipulation

JavaScript can modify HTML elements dynamically.

document.getElementById("demo").innerHTML = "Hello World!";

Events

JavaScript can respond to user actions like clicks.

document.getElementById("btn").addEventListener("click", function() {
  alert("Button clicked!");
});

Conclusion

JavaScript is a powerful language for web development. By mastering these basics, you can build dynamic web applications and enhance user experience.